<!-- src/components/Pagination.vue -->
<template>
  <div class="pagination">
    <button 
    @click="$emit('page-change', prevPage)">
      &larr;
    </button>
    <button 
      v-for="page in totalPages"
      :key="page"
      :class="{ active: page === currentPage }"
      @click="$emit('page-change', page)"
    >
      {{ page }}
    </button>
    <button 
    @click="$emit('page-change', nextPage)">
      &rarr;
    </button>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { defineProps } from 'vue';
const props = defineProps({
  currentPage: Number,
  totalItems: Number,
  pageSize: Number
})
const prevPage = computed(() => {
  return Math.max(props.currentPage - 1, 1)
})
const nextPage = computed(() => {
  return Math.min(props.currentPage + 1, totalPages.value)
})
const totalPages = computed(() => {
  return Math.ceil(props.totalItems / props.pageSize)
})
</script>

<style scoped>
.pagination {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.pagination button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
.pagination button.active {
  background: #1890ff;
  color: white;
  border-color: #1890ff;
}
</style>